import { FLASK_URL, Record } from "@/external-api";
import styles from "@/styles/DataManage.module.css";
import Image from "next/image";
import Logo from "@/assets/logo.svg";
import { Tag } from "antd";

type Props = {
  records: Record[];
};

function ImageWall({ records }: Props) {
  return (
    <div className={styles.imageWall}>
      {records.map((item) => {
        return <RecordCard key={item.id} record={item}></RecordCard>;
      })}
    </div>
  );
}

function RecordCard({ record }: { record: Record }) {
  return (
    <div className={styles.card}>
      <div className={styles.cardTitle}>
        {record.imagePath.split("/").at(-1)}
      </div>
      <Image
        width="200"
        height="180"
        src={`${FLASK_URL}/record/image?id=${record.id}`}
        alt={"样本图片"}
      />
      <div className={styles.cardFooter}>
        <div className={styles.cardFooterItem}>
          清晰度
          <Tag color="cyan" style={{ marginInlineEnd: 0 }}>
            {record.clarity}
          </Tag>
        </div>
        <div className={styles.cardFooterItem}>
          对比度
          <Tag color="volcano" style={{ marginInlineEnd: 0 }}>
            {record.contrast}
          </Tag>
        </div>
        <div className={styles.cardFooterItem}>
          亮度
          <Tag color="gold" style={{ marginInlineEnd: 0 }}>
            {record.brightness}
          </Tag>
        </div>
      </div>
    </div>
  );
}

export default ImageWall;
